<template>
    <div class="page">
        <Collapse @on-change="changeTableHeight">
            <Panel name="1">
                史蒂夫·乔布斯
                <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
            </Panel>
        </Collapse>
        <div class="conn">
            <Table :height="heights" ref="refsTable" stripe border :columns="columns2" :data="data4"></Table>
            <Page :total="40" show-elevator show-sizer/>
        </div>
    </div>
</template>
<script>
import expandRow from './table_expand.vue';
export default {
    name: "index",
    components: { expandRow },
    data() {
        return {
            columns2: [
                {
                    type: 'expand',
                    width: 50,
                    fixed: 'left',
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                row: params.row
                            }
                        })
                    }
                },
                {
                    title: 'Name',
                    key: 'name',
                    width: 100,
                },
                {
                    title: 'Age',
                    key: 'age',
                    width: 100
                },
                {
                    title: 'Province',
                    key: 'province',
                    width: 100
                },
                {
                    title: 'City',
                    key: 'city',
                    width: 100
                },
                {
                    title: 'Address',
                    key: 'address',
                    width: 200
                },
                {
                    title: 'Postcode',
                    key: 'zip',
                    width: 100
                },
                {
                    title: 'Action',
                    key: 'action',
                    fixed: 'right',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                }
                            }, 'View'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                }
                            }, 'Edit')
                        ]);
                    }
                }
            ],
            data4: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    province: 'America',
                    city: 'New York',
                    zip: 100000
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'Washington, D.C. No. 1 Lake Park',
                    province: 'America',
                    city: 'Washington, D.C.',
                    zip: 100000
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    province: 'Australian',
                    city: 'Sydney',
                    zip: 100000
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    province: 'Canada',
                    city: 'Ottawa',
                    zip: 100000
                },
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    province: 'America',
                    city: 'New York',
                    zip: 100000
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'Washington, D.C. No. 1 Lake Park',
                    province: 'America',
                    city: 'Washington, D.C.',
                    zip: 100000
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    province: 'Australian',
                    city: 'Sydney',
                    zip: 100000
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    province: 'Canada',
                    city: 'Ottawa',
                    zip: 100000
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    province: 'Canada',
                    city: 'Ottawa',
                    zip: 100000
                },
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park',
                    province: 'America',
                    city: 'New York',
                    zip: 100000
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'Washington, D.C. No. 1 Lake Park',
                    province: 'America',
                    city: 'Washington, D.C.',
                    zip: 100000
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park',
                    province: 'Australian',
                    city: 'Sydney',
                    zip: 100000
                },
                {
                    name: 'Jon Snow',
                    age: 26,
                    address: 'Ottawa No. 2 Lake Park',
                    province: 'Canada',
                    city: 'Ottawa',
                    zip: 100000
                }
            ],
            heights: 0,
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 根据浏览器高度设置初始高度
            this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 40
            // 监听浏览器高度变化，修改表格高度
            window.onresize = () => {
                this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 40
            }
        })
        // console.log(  "window.innerHeight"+window.innerHeight  );
        // console.log(  "this.$refs.refsTable.$el.offsetTop"+this.$refs.refsTable.$el.offsetTop  );
    },
    methods:{
        changeTableHeight(){
            console.log(  123456  );
            this.heights = window.innerHeight - this.$refs.refsTable.$el.offsetTop - 40
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    border: 0px solid #000;
    height: 100%;
    display: flex;
    flex-flow: column;
    .conn {
        border: 0px solid #000;
        flex: 1;
        display: flex;
        flex-flow: column;
        .ivu-table-wrapper {
            flex: 1;
        }
    }
}
</style>
